<template>
	<view class="vehicle-item" style="margin-bottom: 24rpx;">
		<div v-if="!item.mode">
			<div class="select-one">
				<image src="/static/c1.png" mode="widthFix" style="width: 30rpx;margin-right: 8rpx;margin-top:3rpx">
				</image>
				{{$t("选择参与车辆")}}
			</div>
		</div>
		<template v-else>
			<div class="between" style="align-items: flex-start;">
				<div class="flex">

					<div class="icon">
						<image v-if="item.mode=='汽运'" src="/static/c1.png" style="width: 100%;" mode="widthFix">
						</image>
						<image v-if="item.mode=='火车'" src="/static/c2.png" style="width: 100%;" mode="widthFix">
						</image>
						<image v-if="item.mode=='海运'" src="/static/c3.png" style="width: 100%;" mode="widthFix">
						</image>
						<image v-if="item.mode=='空运'" src="/static/c4.png" style="width: 100%;" mode="widthFix">
						</image>
					</div>

					<div class="info">
						<div class="number">
							{{lang=='zh'?item.name:item.name_ru}}
						</div>
						<div class="type2">
							{{lang=='zh'?item.category.name:item.category.name_ru}}
						</div>
					</div>
				</div>
				<!-- 1空闲 2预定 3订单进行中 -->
				<div class="state state-red" style="background: #5282E6;max-width: 120rpx;">{{$t("选择车辆")}}</div>
			</div>

			<div class="between flex-end" style="margin-top: 25rpx;">
				<div class="flex" style="align-items: flex-start;">
					<div class="item" style="width:130rpx">
						<div class="label">{{$t("载重")}}</div>
						<div class="value">{{item.product_weight}}kg</div>
					</div>
					<div class="item" style="width:130rpx">
						<div class="label">{{$t("体积")}}</div>
						<div class="value">{{item.product_volume}}m³</div>
					</div>
					<div class="item" style="width:170rpx">
						<div class="label">{{$t("车长")}}</div>
						<div class="value">
							{{item.car_l}}x{{item.car_w}}x{{item.car_h}}
						</div>
					</div>
				</div>

				<div v-if="item.transport_list.length>0" style="font-size: 22rpx;">
					{{$t("可运输路线")}}:
					<text style="font-size: 34rpx;margin-left: 10rpx;">
						<b>{{item.transport_list.length}}</b>
					</text>
				</div>
				<div v-else style="font-size: 24rpx;color:#666">
					{{$t("未设置运输路线")}}
				</div>
			</div>
		</template>



	</view>
</template>

<script>
	export default {
		props: ["item"],
		data() {
			return {
				lang: uni.getStorageSync("lang")
			}
		}
	}
</script>

<style lang="scss">
	.vehicle-item {
		background-color: #fff;
		border-radius: 32rpx;
		width: 100%;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		border: 4rpx solid transparent;
		transition: .3s ease;

		.type2 {
			font-size: 22rpx;
			color: #1d1d1d;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			background-color: #1d1d1d;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin-right: 16rpx;
			padding: 15rpx;
			box-sizing: border-box;
			flex-shrink: 0;
		}

		.info {
			.number {
				font-size: 28rpx;
			}


		}

		.state {
			background-color: #00a5fd;
			color: #fff;
			font-size: 22rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 4px;
			padding: 8rpx 40rpx;
		}

		.state-red {
			background-color: #F32929;
		}

		.label {
			font-size: 22rpx;
			color: #999;
			word-break: break-word;
		}

		.value {
			font-size: 24rpx;
			color: #1d1d1d;
			margin-top: 12rpx;
			padding-right: 10rpx;
			word-break: break-all;
		}

		.btn {
			background-color: #1d1d1d;
			color: #fff;
			margin-top: 12rpx;
		}
	}

	.select-one {
		background-color: #5282E6;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		min-width: 190rpx;
		margin: 0 auto;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>